<template>
  <Layout>
    <SliderContent
      :slider-title="$t('NewsCategory')"
      :content-nav="'> ' + $t('NewsCenter')"
    >
      <template #slider>
        <Menu :data="category"></Menu>
      </template>
      <template #content>
        <h2 class="title">{{ detail.name }}</h2>
        <div class="base-info">
          <div class="info">{{ $t("Author") }}：{{ detail.author }}</div>
          <div class="info">
            {{ $t("ReleaseRain") }}： {{ detail.createtime }}
          </div>
        </div>
        <div class="article-content" v-html="content"></div>
      </template>
    </SliderContent>
  </Layout>
</template>

<script setup>
import Layout from "@/components/Layout.vue";
import SliderContent from "@/components/SliderContent.vue";
import Menu from "@/components/Menu.vue";
import { onBeforeMount, onMounted, ref } from "vue";
import { DoubleRightOutlined } from "@ant-design/icons-vue";
import { getArticleDetail, getClassify } from "@/api/news";

const id = ref("");
const category = ref([]);
const detail = ref({});
const content = ref("");

onBeforeMount(() => {
  getClassify().then((res) => {
    category.value = res.data;
  });

  const params = new URLSearchParams(window.location.search);
  id.value = params.get("id");
  getArticleDetail(id.value).then((res) => {
    detail.value = res.detail;
    content.value = res.pagecontent[0].content;
  });
});
</script>

<style lang="less">
.title {
  padding: 6px 5px 10px 5px;
  font-weight: 700;
  font-size: 10px;
  color: #1a1a1a;
  text-align: center;
}

.base-info {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6fa;
  padding: 4px;
  // prettier-ignore
  border: 1PX solid #e5e5e5;
  margin-bottom: 10px;

  .info {
    font-size: 6px;
    color: #666666;
    & + .info {
      margin-left: 20px;
    }
  }
}

.article-content {
  font-size: 7px;
  line-height: 1.5;
}
</style>
